<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
var role = localStorage.getItem('role')
var havaRightToCheck = ref(true)
var isCentral = ref(role==='1')
var tableData = ref([])
const pageSize = 10
const total = ref(0)
const pageNum = ref(1)
const gasNum=ref(0)
const secondaryNum=ref(0)
const getPList =()=>{
  const data = {
    pageNum: pageNum.value,
    pageSize
  }
  const params = new URLSearchParams(data).toString()
  axios.get(`/system/dept/level4?${params}`).then(res=>{
    const {code, msg, ...data} = res.data
    if (code == 200) {
      const {rows, total: tTotal} = data
      tableData.value = rows
      total.value = tTotal
    } else {
      ElMessage.error(msg || '操作失败')
    }
  })
}

const getNum=()=>{
    axios.get(`/system/dept/levelNum`).then(res=>{
        const {code, msg, data} = res.data
        if (code == 200) {
            gasNum.value = data.gasNum
            secondaryNum.value = data.secondaryNum
        } else {
            ElMessage.error(msg || '操作失败')
        }
    })
}

onMounted(()=>{
  getPList()
    getNum()
})

const handlePageChange = (value) => {
  pageNum.value = value
  getPList()
}


</script>

<template>
  <div id="block">
    <div>
      <div class="top">
      <div class="countBox" v-if="isCentral">管理分公司共计<br><span>{{secondaryNum}}</span>    个</div>
      <div class="countBox">管理加油站共计<br><span>{{gasNum}}</span>    个</div>
    </div>
      <div class="listBox">
        <el-table stripe :data="tableData">
          <el-table-column  type="index" label="序号" width="120" />
          <el-table-column prop="deptName" label="名称" width="120" />
          <el-table-column prop="address" label="地址" width="200"/>
          <el-table-column prop="parentName" label="所属分公司" width="180" />
          <el-table-column prop="leader" label="负责人" width="120" />
          <el-table-column prop="phone" label="联系电话" width="110" />
          <el-table-column prop="email" label="邮箱"  width="170"/>
        </el-table>
      </div>
    </div>
    <div class="paginationBox">
      <el-pagination v-model="pageNum" @current-change="handlePageChange" background layout="prev, pager, next" :default-page-size="pageSize" :total="total" />

    </div>

  </div>

</template>

<style scoped>
#block{
  margin: auto;
  width: fit-content;
  margin-top: 10px;
  min-height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#lock{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top{
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.listBox{
  background-color: #fff;
  padding: 20px 40px;
  max-height: 75%;
  height: 70%;
  /* margin: 3% auto 0; */
  margin-top: 20px;
}
#addStation{
  margin-top: 20px;
  padding:15px 20px;
}
.countBox {
  padding: 15px 30px;
  border-radius: 5px;
  background-color: #fff;
}
.countBox span{
  color: var(--el-color-primary);
}
h3{
  text-align: center;
  font-size: 30px;
  color: var(--el-color-primary);
}
.countBox>span{
  font-weight: bold;
  font-size: 24px;
}
.paginationBox {
  margin: 30px auto;
  display: flex;
  justify-content: center;
}
</style>